<template>
  <div>
    <el-card>
      <div class="border">
        <span style="font-size: 17px;font-weight: bold">发送短信</span>
      </div>
      <div style="padding:10px 150px;margin-top:10px">
        <el-form
          ref="form"
          :rules="rules"
          :model="formInfo"
          label-width="120px"
        >
          <el-form-item label="短信内容:" prop="content">
            <el-input
              placeholder="请输入短信内容"
              style="width: 500px"
              v-model="formInfo.content"
              type="textarea"
              :rows="5"
            ></el-input>
          </el-form-item>
          <el-form-item label="人员选择方式:" prop="selectUserType">
            <el-radio v-model="formInfo.sendSmsType" label="PHONE"
              >手机号发送
            </el-radio>
            <el-radio
              @change="changeRadio"
              v-model="formInfo.sendSmsType"
              label="SELECT"
              >选择用户发送
            </el-radio>
          </el-form-item>
          <el-form-item
            v-if="formInfo.sendSmsType == 'SELECT'"
            label="接收人员:"
            prop="userUqIds"
          >
            <user-select
              v-if="show"
              @getUser="getUser"
              isMulSelect
              style=" width: 500px;"
            ></user-select>
          </el-form-item>
          <el-form-item
            v-if="formInfo.sendSmsType == 'PHONE'"
            label="接收人员"
            prop="phones"
          >
            <el-input
              type="textarea"
              :rows="3"
              class="input_content"
              placeholder="接收人员手机号,可使用英文逗号分隔"
              v-model="formInfo.phones"
            ></el-input>
          </el-form-item>
          <el-form-item style="padding-top: 20px;display: flex">
            <el-button :loading="loading" type="primary" @click="sendSms">
              发送
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import userSelect from "@/components/user-select.vue";

export default {
  created() {},
  data() {
    return {
      rules: {
        content: [
          { required: true, message: "请输入短信内容", trigger: "blur" }
        ],
        userUqIds: [
          { required: true, message: "请选择接收人员", trigger: "blur" }
        ],
        phones: [{ required: true, message: "请输入接收人员", trigger: "blur" }]
      },

      loading: false,
      show: true,
      //新增表单
      formInfo: {
        content: "",
        sendSmsType: "PHONE",
        userUqIds: "",
        phones: ""
      }
    };
  },
  methods: {
    getUser(val) {
      this.formInfo.userUqIds = val.uuid;
    },
    changeRadio() {
      this.formInfo.userUqIds = "";
      this.formInfo.phones = "";
    },
    sendSms() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let tem = { body: this.formInfo };
          this.loading = true;
          this.API.sendSms(tem).then(ret => {
            this.$message.success("发送成功");
            this.loading = false;
            this.show = false;
            let t = setTimeout(() => {
              this.show = true;
            }, 0);
            this.formInfo = {
              content: "",
              sendSmsType: "PHONE",
              userUqIds: "",
              phones: ""
            };
          });
        }
      });
    }
  },
  components: {
    userSelect
  }
};
</script>
<style scoped>
/deep/ .el-card__body {
  padding: 0;
}

.border {
  padding: 19px 0 19px 20px;
  border-bottom: 1px solid rgba(224, 238, 249, 1);
}

.input_content {
  float: left;
  width: 500px;
  height: auto;
  margin-right: 150px;
  box-sizing: border-box;
  font-size: 14px;
  /*color: #666666;*/
  text-align: left;
}

/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #409eff;
  color: white;
}

[data-v-05e2a05e] /deep/ .el-input__inner {
  width: 430px;
}

/deep/ [data-v-05e2a05e] {
  float: left;
}

.input_content1 {
  width: 1px;
}
</style>
